<template>
  <div class="app-container">
    <div style="padding:10px">
      <el-form :inline="true" class="search-form" label-width="100px">
        <el-row style="display: flex">
          <div style="flex: 1">
            <el-form-item label="订单号" style="margin: 5px 0">
              <el-input clearable placeholder="请输入订单号" v-model="searchForm.order_no"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')" class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item label="收货人姓名" style="margin: 5px 0">
              <el-input clearable placeholder="请输入收货人姓名" v-model="searchForm.recipient" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="收货人电话" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入收货人电话"
                v-model="searchForm.phone_number"
                type="number"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item> -->
            <el-form-item v-if="searchDisplay" label="商品名称" style="margin: 5px 0">
              <el-input clearable placeholder="请输入商品名称" v-model="searchForm.goods_name" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item label="订单状态" style="margin: 5px 0">
              <el-select clearable v-model="searchForm.status" placeholder="请选择订单状态">
                <el-option v-for="item in [
                    { name: '待付款', id: 1 },
                    { name: '待发货', id: 2 },
                    { name: '待收货', id: 3 },
                    { name: '退货、售后', id: 4 },
                    { name: '已收货', id: 5 },
                    { name: '已取消', id: 9 },
                  ]" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="searchDisplay" label="用户ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入用户ID" v-model="searchForm.user_id"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')" class="input-with-select">
              </el-input>
            </el-form-item>

            <el-form-item v-if="searchDisplay" label="商品ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入商品ID" v-model="searchForm.goods_id" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>

            <el-form-item v-if="searchDisplay" label="供货商ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入供货商ID" v-model="searchForm.supplier_id" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item v-if="searchDisplay" label="店铺/商户ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入店铺/商户ID" v-model="searchForm.mer_id" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>

            <el-form-item v-if="searchDisplay" label="下单起始时间" style="margin: 5px 0">
              <el-date-picker v-model="create_time" type="datetimerange" @change="create_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-if="searchDisplay" label="支付起始时间" style="margin: 5px 0">
              <el-date-picker v-model="pay_time" type="datetimerange" @change="pay_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" align="right">
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
              <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
              <el-button v-if="!searchDisplay" type="warning" icon="el-icon-caret-bottom"
                @click="searchDisplay = true">展开</el-button>
              <el-button v-else type="warning" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <!-- <el-button
              v-hasPermi="'platformorder/aftersales'"
              @click="pathWay"
              icon="el-icon-tickets"
              type="primary"
              >售后订单</el-button
            > -->
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="getListWay"></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col class="with_search_card">
          <el-table highlight-current-row :data="OrderList" :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }" style="width: 100%" v-loading="loading" height="100%">
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
              min-width="80" align="center">
              <template slot-scope="scope">
                <div v-if="fruit == 'user_avatar' || fruit == 'goods_main_image'"
                  style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image v-if="scope.row[fruit]" :src="scope.row[fruit]" :preview-src-list="[scope.row[fruit]]" />
                </div>
                <div v-else-if="fruit == 'pay_service'">
                  <span style="color: #54bcbd;" v-if="scope.row[fruit] == 1">余额支付</span>
                  <span style="color: #0076f6;" v-if="scope.row[fruit] == 2">支付宝</span>
                  <span style="color: #f86d60;" v-if="scope.row[fruit] == 3">微信</span>
                  <span style="color: #54bcbd;" v-if="scope.row[fruit] == 0">已取消</span>
                </div>
                <div v-else-if="fruit == 'status'">
                  <span v-if="scope.row.status == 1" style="color: #f86d60;">待支付</span>
                  <span v-if="scope.row.status == 2" style="color: #0076f6;">待发货</span>
                  <span v-if="scope.row.status == 3" style="color: #0076f6;">待收货</span>
                  <span v-if="scope.row.status == 4" style="color: #f86d60;">售后中</span>
                  <span v-if="scope.row.status == 5" style="color: #13ce66;">已收货</span>
                  <span v-if="scope.row.status == 6" style="color: #13ce66;">已完成</span>
                  <span v-if="scope.row.status == 7" style="color: #54bcbd;">售后完成</span>
                  <span v-if="scope.row.status == 9" style="color: #666;">已取消</span>
                </div>
                <span v-else>
                  <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" width="200" prop="address" label="操作">
              <template slot-scope="scope">

                <!-- <el-button v-hasPermi="'platformorder/refund'" v-if="scope.row.status == 2" style="margin: 5px"
                  type="text" @click="refundOrder(scope.row)">
                  退款
                </el-button> -->

                <!-- <el-button v-hasPermi="'platformorder/cancel_order'" @click="cancellationOrder(scope.row)"
                  v-if="scope.row.status == 1" style="margin: 5px" type="text" slot="reference">
                  取消订单
                </el-button> -->
                <!-- <el-button v-if="scope.row.status == 1 || scope.row.status == 2" style="margin: 5px" type="text"
                   @click="editNotesWay(scope.row)">
                  查看备注
                </el-button> -->
                <!-- <el-button v-hasPermi="'platformorder/modify_address'"
                  v-if="scope.row.status == 1 || scope.row.status == 2" style="margin: 5px" type="text"
                  @click="drawerHandle(scope.row)">
                  修改收货地址
                </el-button> -->
                <el-button style="margin: 5px" type="text" @click="detailsHandle(scope.row)">
                  详情
                </el-button>
               
                <!-- <el-button v-if="
                    scope.row.status == 3 ||
                    scope.row.status == 4 ||
                    scope.row.status == 5
                  " style="margin: 5px" type="text" @click="recordsWay(scope.row)">
                  发货记录
                </el-button> -->
              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row style="text-align: right">
        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.pageSize"
          @pagination="getListWay" />
      </el-row>
    </div>
    <!-- 添加备注弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="添加备注" size="50%" :withHeader="false"
      :visible.sync="setRemarkDialog" @close="setRemarkclose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>添加备注</span>
          <div class="close" @click="setRemarkclose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 130px)">
        <el-row style="position: relative;padding: 30px;" v-loading="setRemarkLoading">
          <el-form label-width="80px">
            <el-col :span="22">
              <el-form-item label="备注" :rules="[{ required: true }]">
                <el-input type="textarea" placeholder="请输入要添加的备注" maxlength="200" show-word-limit
                  :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="remarkForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button type="primary" :loading="setRemarkLoading" @click="setRemarkSubmit">确 定</el-button>
      </el-col>
    </el-drawer>
    <!-- 修改收货地址弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="审核" size="50%" :withHeader="false"
      :visible.sync="addressDialog" @close="aftersalesClose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>修改收货地址</span>
          <div class="close" @click="aftersalesClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 130px)">
        <el-row :gutter="20" style="position: relative;margin: 30px 10px 0 20px;" v-loading="addressLoading">
          <el-form label-width="120px" :rules="addressRules" ref="addressForm" :model="addressForm">
            <el-col :span="11">
              <el-form-item label="收货人姓名" prop="recipient">
                <el-input type="text" placeholder="请输入收货人姓名" maxlength="10" show-word-limit
                  v-model.trim="addressForm.recipient"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="收货人手机号" prop="phone_number">
                <el-input type="text" placeholder="请输入收货人手机号" maxlength="11" show-word-limit
                  v-model.trim="addressForm.phone_number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="收货人省份" prop="province_name">
                <el-select @change="provinceWay" v-model="addressForm.province_name" placeholder="请输入收货人省份">
                  <el-option v-for="item in provinceList" :key="item.name" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="收货人城市" prop="city_name">
                <el-select @change="cityWay" v-model="addressForm.city_name" placeholder="请输入收货人城市">
                  <el-option v-for="item in cityList" :key="item.name" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="收货人区/县" prop="district_name">
                <el-select v-model="addressForm.district_name" placeholder="请输入收货人城市">
                  <el-option v-for="item in districtList" :key="item.name" :label="item.name" :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="收货人详细地址" prop="address_details">
                <el-input type="text" placeholder="请输入收货人详细地址" maxlength="50" show-word-limit
                  v-model.trim="addressForm.address_details"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button type="primary" :loading="addressLoading" @click="addressSubmit">确 定</el-button>
      </el-col>
    </el-drawer>

    <!-- 取消订单备注弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="取消订单" size="50%" :withHeader="false"
      :visible.sync="cancelDialog" @close="cancelclose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>取消订单原因</span>
          <div class="close" @click="cancelclose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 130px)">
        <el-row style="position: relative" v-loading="cancelLoading">
          <el-form label-width="80px">
            <el-col :span="22">
              <el-form-item label="取消原因">
                <el-input type="textarea" placeholder="请输入取消原因" maxlength="200" show-word-limit
                  :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="cancelform.reason"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button type="primary" :loading="cancelLoading" @click="serCancelSubmit">确 定</el-button>
      </el-col>
    </el-drawer>
    <!-- 退款弹框弹框 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="退款信息" size="50%" :withHeader="false"
      :visible.sync="refundDialog" @close="refundclose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>退款信息</span>
          <div class="close" @click="refundclose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 130px)">
        <el-row style="position: relative;padding: 30px 10px 0 20px;" v-loading="refundLoading">
<!-- :model="refundform" :rules="refundRules" ref="refundform" -->
          <el-form label-width="100px">
            <div v-for="(item,index) in refundformList" :key="index">
              <el-col :span="22">
                <el-form-item label="商品名称：" prop="goods_name">
                  <span style="color: #666;font-weight: 550;">{{item.goods_name}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="现金" prop="price_total">
                  <el-input type="Number" min="0" placeholder="请输入现金" show-word-limit
                    v-model.trim="item.pay_total"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="积分" prop="points_total">
                  <el-input type="Number" min="0" placeholder="请输入积分" show-word-limit
                    v-model.trim="item.points_total"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="提货券" prop="coupon_total">
                  <el-input type="Number" min="0" placeholder="请输入提货券" show-word-limit
                    v-model.trim="item.coupon_total"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="取消原因">
                  <el-input type="textarea" placeholder="请输入取消原因" maxlength="200" show-word-limit
                    :autosize="{ minRows: 3, maxRows: 6 }" v-model.trim="item.reason"></el-input>
                </el-form-item>
              </el-col>
            </div>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
        <el-button type="primary" :loading="refundLoading" @click="refundSubmit">确 定</el-button>
      </el-col>
    </el-drawer>
    <!--商品详情start  -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="商品详情" size="50%" :withHeader="false"
      :visible.sync="productDialog" @close="productclose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>商品详情</span>
          <div class="close" @click="productclose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 130px)">
        <el-row style="position: relative;padding: 30px 10px 0 20px;" v-loading="productLoading">
            <el-descriptions :column="2" style="margin-top: 10px">
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 订单流水号 </template>
                {{ subproduct_details.trade_no ? subproduct_details.trade_no : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 商品编码 </template>
                {{ subproduct_details.goods_bn ? subproduct_details.goods_bn : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 商品ID </template>
                {{ subproduct_details.goods_id}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 商品名字 </template>
                {{ subproduct_details.goods_name}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 副标题 </template>
                {{ subproduct_details.goods_subtitle}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 规格名字 </template>
                {{ subproduct_details.product_sku}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 商品类型 </template>
                <span v-if="subproduct_details.goods_type == 1">普通商品</span>
                <span v-if="subproduct_details.goods_type == 2">卡密商品</span>
                <span v-if="subproduct_details.goods_type == 3">虚拟商品</span>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 购买数量 </template>
                {{ subproduct_details.buy_number}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 创建时间 </template>
                {{ subproduct_details.created_at}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 商品图片 </template>
                <div
                  style="width: 40px; height: 40px;">
                  <el-image :src="subproduct_details.goods_main_image" :preview-src-list="[subproduct_details.goods_main_image]" />
                </div>
              </el-descriptions-item>

            </el-descriptions>
        </el-row>
      </el-scrollbar>

    </el-drawer>
    <!-- 商品详情end -->
    <!-- 支付详情 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="支付详情" size="50%" :withHeader="false"
      :visible.sync="payDialog" @close="payclose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>支付详情</span>
          <div class="close" @click="payclose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 130px)">
        <el-row style="position: relative;padding: 30px 10px 0 20px;">
            <el-descriptions :column="2" style="margin-top: 10px">
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 支付流水号 </template>
                {{ paydetail.pay_order_no ? paydetail.pay_order_no : "-" }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 支付渠道 </template>
                <span v-if="paydetail.pay_service == 1">余额</span>
                <span v-if="paydetail.pay_service == 2">支付宝</span>
                <span v-if="paydetail.pay_service == 3">微信</span>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 发起时间 </template>
                {{ paydetail.created_at}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 支付状态 </template>
                <span v-if="paydetail.pay_status == 0">待支付</span>
                <span v-if="paydetail.pay_status == 1">已支付</span>
                <span v-if="paydetail.pay_status == 2">已取消</span>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 支付时间 </template>
                {{ paydetail.created_at}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 余额 </template>
                {{ paydetail.pay_total}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 积分 </template>
                {{ paydetail.points_total}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="description">
                <template slot="label"> 提货券 </template>
                {{ paydetail.coupon_total}}
              </el-descriptions-item>


            </el-descriptions>
        </el-row>
      </el-scrollbar>

    </el-drawer>
    <!-- 支付详情end -->
    <!-- 发货记录 -->
    <el-dialog title="发货记录" :close-on-click-modal="false" :visible.sync="recordsDialog" width="800px">
      <el-row style="position: relative" v-loading="recordsLoading">
        <el-descriptions v-for="(item, index) in recordsList" :key="index" :column="5" border style="margin-top: 10px">
          <el-descriptions-item :span="1">
            <template slot="label"> 发货ID </template>
            {{ item.delivery_id }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 快递名称 </template>
            {{ item.express_name }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 快递单号 </template>
            {{ item.express_num }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 发货状态 </template>
            <el-tag v-if="item.status == 1" type="warning">已发货</el-tag>
            <el-tag v-if="item.status == 2" type="info">已收货</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 发货时间 </template>
            {{ item.created_at }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 收货人 </template>
            {{ item.recipient }}
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 收货人电话 </template>
            {{ item.phone_number }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 收货人省市区 </template>
            {{ item.province_name }}
            {{ item.city_name }}
            {{ item.district_name }}
          </el-descriptions-item>
          <el-descriptions-item :span="3">
            <template slot="label"> 收货详细地址 </template>
            {{ item.address_details }}
          </el-descriptions-item>
        </el-descriptions>
        <el-empty v-if="recordsList.length == 0" description="暂无数据"></el-empty>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="recordsLoading" @click="recordsDialog = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 订单详情 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="订单信息" size="75%" :withHeader="false"
      :visible.sync="detailsDialog" @close="addressClose" :show-close="true">
      <div class="drawerTitle">
        <span>订单信息</span>
        <div class="close" @click="addressClose">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <div style="position: relative;padding: 10px 30px;" v-loading="detailsLoading">
        <div class="order_box">
          <div>订单编号：<span>{{detailsObj.order_no}}</span></div>
          <div>订单类型：<span v-if="detailsObj.type == 1">普通订单</span>
              <span v-if="detailsObj.type == 2">活动订单</span></div>
          <div style="flex: 1;"></div>
          <div style="margin-right: 5px;">支付状态：
          <span style="color: #bd3124;" v-if="detailsObj.status == 1">待支付</span>
          <span style="color: #bd3124;" v-else>已支付</span>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-tabs v-model="activeNames" @tab-click="infotabshandleClick">
            <el-tab-pane label="订单信息" name="order_information"></el-tab-pane>
            <el-tab-pane label="商品列表" name="order_goodslist"></el-tab-pane>
            <el-tab-pane label="支付信息" name="order_pay"></el-tab-pane>
            <el-tab-pane label="订单备注" name="order_remarks"></el-tab-pane>
            <el-tab-pane label="活动信息" name="order_active"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="informationTitleView" v-if="activeNames == 'order_information'">
          <div class="leftBox">
            <div class="leftborder"></div>
            <div class="text">用户信息</div>
          </div>
          <div class="right">
            <span></span>
            <div @click="jump_information(detailsuser.user_id)">
              用户信息
              <i class="el-icon-arrow-right" style="color: #000;margin-left: 4px;"></i>
            </div>

          </div>
        </div>
        <div class="useribfx" v-if="activeNames == 'order_information'">
          <div style="
              width: 64px;
              height: 64px;
              border-radius: 32px;
              overflow: hidden;
            ">
            <el-image v-if="detailsuser.avatar ? detailsuser.avatar : '-'"
              :src="detailsuser.avatar ? detailsuser.avatar : '-'" :preview-src-list="[
                detailsuser.avatar ? detailsuser.avatar : '-',
              ]" />
          </div>
          <div class="user_ibx">
            <div>
              <div class="user_infox">用户uuid：{{detailsuser.uuid}}</div>
              <div class="user_infox">用户昵称：{{detailsuser.nickname}}</div>
            </div>
            <div style="margin-left: 50px;">
              <div class="user_infox">用户账户：{{detailsuser.mobile}}</div>
              <div class="user_infox">用户标签：<span v-for="(item,index) in detailsuser.user_tag">{{item.tag_name}}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户 -->
        <div v-if="activeNames == 'order_information'">
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">订单信息</div>
            </div>
            <div class="right">
                <el-button style="color: #fff;" v-if="detailsObj.status == 2" v-hasPermi="'platformorder/refund'" type="primary" @click="refundOrder(detailsObj)">订单拦截</el-button>

            </div>
          </div>
          <el-descriptions :column="2" style="margin-top: 10px">
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单流水号 </template>
              {{ detailsObj.order_no ? detailsObj.order_no : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单类型 </template>
              <span style="color: #1890ff" v-if="detailsObj.type == 1">普通订单</span>
              <span style="color: #1890ff;" v-if="detailsObj.type == 2">活动订单</span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 商品数量 </template>
              {{ detailsObj.goods_nums ? detailsObj.goods_nums : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单状态 </template>
              <span v-if="detailsObj.status == 1">待支付</span>
              <span v-if="detailsObj.status == 2">待发货</span>
              <span v-if="detailsObj.status == 3">待收货</span>
              <span v-if="detailsObj.status == 4">售后</span>
              <span v-if="detailsObj.status == 5">已收货</span>
              <span v-if="detailsObj.status == 6">已完成</span>
              <span v-if="detailsObj.status == 9">已取消</span>
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 余额总价 </template>
              {{ detailsObj.price_total}}
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 积分总价(含手续费) </template>
              {{detailsObj.points_total }}
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 提货券总价(含手续费) </template>
              {{ detailsObj.coupon_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 总运费 </template>
              {{ detailsObj.freight_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 总折扣 </template>
              {{ detailsObj.discount_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 实际余额支付 </template>
              {{ detailsObj.pay_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 下单时间 </template>
              {{ detailsObj.created_at}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单ID </template>
              {{ detailsObj.id}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 商品列表 -->
        <div v-if="activeNames == 'order_goodslist'">
          <el-row :gutter="20">
            <el-col :span="24" v-loading="goodsListLoading">
              <el-table highlight-current-row :data="goodsList" :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }" style="width: 100%">
                <el-table-column align="center" prop="trade_no" label="子订单号" width="150">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.trade_no + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.trade_no ? scope.row.trade_no : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="goods_name" label="商品名字" width="200">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.goods_name + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.goods_name ? scope.row.goods_name : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="buy_number" label="购买数量">
                </el-table-column>
                <el-table-column align="center" prop="pay_total" label="现金">
                </el-table-column>
                <el-table-column align="center" prop="points_total" label="积分">
                </el-table-column>
                <el-table-column align="center" prop="coupon_total" label="提货券">
                </el-table-column>
                <el-table-column align="center" prop="discount_total" label="总抵扣">
                </el-table-column>
                <el-table-column align="center" fixed="right" width="150" prop="address" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="goodsdetail(scope.row)">
                      详情
                    </el-button>
                    <el-button v-if="detailsObj.status!=1"  @click="view_logistics(scope.row)" style="margin: 5px" type="text" >
                  查看物流
                </el-button>
                  </template>
                </el-table-column>

              </el-table>
            </el-col>
          </el-row>
        </div>
        <!-- 支付 -->
        <div v-if="activeNames == 'order_pay'">
          <el-row :gutter="20">
            <el-col :span="24" v-loading="payListLoading">
              <el-table highlight-current-row :data="payList" :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }" style="width: 100%">
                <el-table-column align="center" prop="pay_order_no" label="支付流水号" width="150">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.pay_order_no + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.pay_order_no ? scope.row.pay_order_no : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_service" label="服务商">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pay_client == 1">APP</span>
                    <span v-if="scope.row.pay_client == 2">WAP</span>
                    <span v-if="scope.row.pay_client == 3">PC</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_client" label="支付渠道">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pay_service == 1">余额</span>
                    <span v-if="scope.row.pay_service == 2">支付宝</span>
                    <span v-if="scope.row.pay_service == 3">微信</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_service" label="支付类型">
                  <template slot-scope="scope">

                  </template>
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="发起时间">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.created_at + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.pay_order_no ? scope.row.created_at : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_status" label="支付状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pay_status == 0">待支付</span>
                    <span v-if="scope.row.pay_status == 1">已支付</span>
                    <span v-if="scope.row.pay_status == 2">已取消</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_time" label="支付时间">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.created_at + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.pay_order_no ? scope.row.created_at : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_total" label="余额">
                </el-table-column>
                <el-table-column align="center" prop="points_total" label="积分">
                </el-table-column>
                <el-table-column align="center" prop="coupon_total" label="提货券">
                </el-table-column>

                <el-table-column align="center" fixed="right" width="150" prop="address" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="payInfodetail(scope.row)">
                      详情
                    </el-button>
                  </template>
                </el-table-column>


              </el-table>
            </el-col>
          </el-row>
        </div>
        <!-- 订单信息remarkList -->
        <div v-if="activeNames == 'order_remarks'">
          <el-row :gutter="20">
            <el-col :span="20" style="margin-bottom: 20px;">
              <el-button type="primary" size="small" @click="setRemarkDialog = true">添加备注</el-button>
            </el-col>
            <el-col :span="24" v-loading="remarkLoading">
              <el-table highlight-current-row :data="remarkList" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%">
                <el-table-column align="center" prop="create_user" label="创建人" width="150">
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="备注时间" width="180">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.created_at + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.created_at ? scope.row.created_at : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="remark" label="备注内容">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.remark + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.remark ? scope.row.remark : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>

              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailsDialog = false">确 定</el-button>
      </span>
    </el-drawer>
    <!-- 物流详情 -->
    <el-drawer  :visible.sync="logisticsDialog" :show-close="false"  title="物流信息" size="55%" :withHeader="false">
      <div class="drawerTitle">
        <span>物流信息</span>
        <div class="close" @click="logisticsClose">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <div v-loading="logisticsLoading" style="padding:20px">
        <div  v-if="activities.length==0">订单未发货</div>
        <div v-else style="margin-top:20px">
        <div >快递名称：{{kdmc}}</div>
        <div style="margin-top:20px">快递单号：{{kddh}}</div>  
        <el-card style="margin-top: 20px;" class="box-card">  
          <div style="font-size:14px">{{kdmsg}}</div>
          <el-timeline style="margin-top: 20px;" :reverse="false">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.time">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {
    getOrderListByOrder,
    getOrderList,
    getRemarkList,
    setRemark,
    setAddress,
    serCancel,
    setRefundDirect,
    getDeliveryList,
    getInfoByOrder,
    getGoodsByOrder,
    getPayList,
    getActivity,
    getInfo,
    setRefundDirectBatch,
    getlogistics
  } from "@/api/order/index";
  import {
    getRegionList
  } from "@/api/user/index";
  const tableTheadOption = {
    order_no: {
      label: "订单号",
      field: "order_no",
    },
    points_total: {
      label: "总积分",
      field: "points_total",
    },
    coupon_total: {
      label: "总提货券",
      field: "coupon_total",
    },
    freight_total: {
      label: "总运费",
      field: "freight_total",
    },
    discount_total: {
      label: "总折扣",
      field: "discount_total",
    },
    pay_total: {
      label: "总金额",
      field: "pay_total",
    },
    created_at: {
      label: "下单时间",
      field: "created_at",
    },
    pay_service: {
      label: "支付平台",
      field: "pay_service",
    },
    pay_time: {
      label: "支付时间",
      field: "pay_time",
    },
    user_nickname: {
      label: "用户昵称",
      field: "user_nickname",
    },
    user_avatar: {
      label: "用户头像",
      field: "user_avatar",
    },
    status: {
      label: "订单状态",
      field: "status",
    },
  };
  const allTableThead = [
    "order_no",
    "points_total",
    "coupon_total",
    "freight_total",
    "discount_total",
    "pay_total",
    "created_at",
    "pay_service",
    "pay_time",
    "user_nickname",
    "user_avatar",
    "status",
  ];
  const defaultTableThead = [
    "user_nickname",
    "order_no",
    "created_at",
    "pay_total",
    "coupon_total",
    "points_total",
    "freight_total",
    "discount_total",
    "status",
  ];
  export default {
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
      },
    },
    data() {
      return {
        reverse: true,
        activities: [],
        kdmc:'',
        kddh:'',
        kdmsg:'',
        logisticsLoading: false, //物流信息加载
        logisticsDialog: false, //物流信息
        refundformList:[],//订单拦截的数组
        paydetail:{},//支付详情
        payDialog:false,//支付详情展开
        payListListLoading: false,
        payList:[],
        goodsListLoading: false,
        goodsList: [],
        // 默认表头
        activeNames: 'order_information',
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: false,
        searchForm: {
          order_no: "", //根据订单号
          user_id: "", // 根据用户ID
          status: "", //订单状态：1=待付款；2=待发货；3=待收货；4=退货、售后；5=已收货；9=已取消
          phone_number: "", // 收货人电话检索
          recipient: "", // 收货人姓名检索
          goods_id: "", // 商品ID检索
          goods_name: "", // 商品名称检索
          supplier_id: "", // 供货商ID检索
          mer_id: "", // 店铺/商户ID检索（0=平台自营）
          create_time_start: "", //下单起始时间（例：2023-10-01 12:20）
          create_time_end: "", //下单截至时间（例：2023-10-02 12:20）
          pay_time_start: "", //支付起始时间（例：2023-10-01 12:20）
          pay_time_end: "", //支付截至时间（例：2023-10-02 12:20）
          pageSize: 10,
          page: 1,
        },
        // 当前搜索是否展开
        searchDisplay: false,
        create_time: [],
        pay_time: [],
        pickerOptions: {
          shortcuts: [{
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        OrderList: [],
        goodsid: '', //订单ID
        total: 0,
        remarkDialog: false, // 订单备注弹框控制器
        remarkLoading: false, // 订单备注弹框加载控制器
        remarkList: [], // 订单备注列表
        remarkForm: {
          detail_id: "",
          remark: "",
        },
        setRemarkDialog: false, // 订单备注弹框控制器
        setRemarkLoading: false, // 订单备注弹框加载控制器
        addressForm: {
          detail_id: "", //订单明细表ID
          recipient: "", //收货人姓名
          phone_number: "", //收货人电话
          province_name: "", //省
          city_name: "", //市
          district_name: "", //区
          address_details: "", //	详细地址
        },
        addressRules: {
          recipient: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^a-zA-Z\u4e00-\u9fa5·]/g;
              if (value === "") {
                callback(new Error("收货人名称为必填项"));
              } else {
                if (req.test(value)) {
                  callback(new Error("名称只能为中文和英文"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          }, ],
          phone_number: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (!req.test(value)) {
                callback(new Error("收货人手机号格式不正确"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          province_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人省份为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          city_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人城市为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          district_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人区/县为必选项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          address_details: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /^1[3|4|5|7|8][0-9]{9}$/;
              if (value === "") {
                callback(new Error("收货人详细地址为必填项"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
        },

        provinceList: [],
        cityList: [],
        districtList: [],
        addressFules: {},
        addressDialog: false,
        addressLoading: false,

        cancelform: {
          detail_id: "",
          reason: "",
        },
        cancelDialog: false,
        cancelLoading: false,

        refundform: {
          detail_id: "",
          price_total: "",
          points_total: "",
          coupon_total: "",
          reason: "",
        },
        refundRules: {
          price_total: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
          points_total: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
          coupon_total: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (value === "" || value == 0) {
                callback();
              } else {
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
        },
        refundDialog: false,
        refundLoading: false,

        recordsDialog: false,
        recordsLoading: false,
        recordsList: [],

        detailsLoading: false,
        detailsDialog: false,
        detailsObj: {}, //订单信息
        detailsuser: {}, //收货人信息
        subproduct_details:{},//子订单详情
        productDialog:false,
        productLoading:false
      };
    },
    created() {
      this.getListWay();
    },
    methods: {
      payclose(){
        this.payDialog = false
      },
      //支付详情
      payInfodetail(row){
        this.paydetail = row
        this.payDialog = true
      },
      productclose(){
        this.productDialog = false
      },
      //商品列表详情
      goodsdetail(row){
        this.productDialog = true
        this.productLoading = true
        getInfo({detail_id:row.detail_id})
          .then((res) => {
            this.subproduct_details = res.data
            this.productLoading = false
          })
          .catch((err) => {
            this.$messages.error(err.msg);
            this.productLoading = false
          });

      },
      //关闭备注弹窗
      setRemarkclose() {
        this.remarkForm.remark = '';
        this.setRemarkDialog = false
      },
      //切换tab
      infotabshandleClick(tab, event) {
        if (this.activeNames == 'order_remarks') {
          this.editNotesWay()
        }
        if (this.activeNames == 'order_goodslist') {
          this.getgoodsByOrder()
        }
        if (this.activeNames == 'order_pay') {
          this.getgoodspay()
        }

      },
      //获取支付列表
      getgoodspay() {
        this.payListLoading = true
        getPayList({id:this.goodsid})
          .then((res) => {
            this.payListLoading = false;
            this.payList = res.data;

          })
          .catch((err) => {
            this.payListLoading = false;
            this.$messages.error(err.msg);
          });
      },
      //获取商品列表
      getgoodsByOrder() {
        this.goodsListLoading = true
        getGoodsByOrder({id:this.goodsid})
          .then((res) => {
            this.goodsListLoading = false;
            this.goodsList = res.data;
            // this.total = res.data.total;
          })
          .catch((err) => {
            this.goodsListLoading = false;
            this.$messages.error(err.msg);
          });
      },
      //查看物流
      view_logistics(row){
        this.logisticsLoading = true
        this.logisticsDialog = true
        getlogistics({detail_id:row.detail_id,delivery_no:''}).then((res) => {
          if(res.data.length!=0) {
            if(res.data.data.length!=0) {
              this.kdmc = res.data.kdmc
              this.kddh = res.data.kddh
              this.activities = res.data.data
              this.logisticsLoading = false
            }else{
              this.activities = {};
              this.kdmsg ='暂无物流信息';
              this.kdmc = res.data.kdmc
              this.kddh = res.data.kddh
              this.logisticsLoading = false
            }
          }else{
            this.activities = []
            this.logisticsLoading = false
          }





          
        })
      },
      //关闭物流信息
      logisticsClose(){
        this.logisticsDialog = false
      },
    //取消订单弹窗关闭
    cancelclose() {
      this.cancelDialog = false
      this.cancelform.reason = '';
    },
    //退款弹窗关闭
    refundclose() {
      this.refundDialog = false
      this.refundform.price_total = '';
      this.refundform.points_total = '';
      this.refundform.coupon_total = '';
      this.refundform.detail_id = '';
      this.refundform.reason = '';
    },
    //关闭修改地址弹窗
    aftersalesClose() {
      this.addressDialog = false
    },
    //关闭详情弹窗
    addressClose() {
      this.detailsDialog = false
      this.activeNames = 'order_information'
    },
    getListWay() {
      this.loading = true;
      getOrderListByOrder(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.OrderList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0];
      this.searchForm.create_time_end = vla[1];
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0];
      this.searchForm.pay_time_end = vla[1];
    },
    resetting() {
      this.searchForm = {
        order_no: "", //根据订单号
        user_id: "", // 根据用户ID
        status: "", //订单状态：1=待付款；2=待发货；3=待收货；4=退货、售后；5=已收货；9=已取消
        phone_number: "", // 收货人电话检索
        recipient: "", // 收货人姓名检索
        goods_id: "", // 商品ID检索
        goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        mer_id: "", // 店铺/商户ID检索（0=平台自营）
        create_time_start: "", //下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", //下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", //支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", //支付截至时间（例：2023-10-02 12:20）
        pageSize: 10,
        page: 1,
      };
      this.create_time = [];
      this.pay_time = [];
      this.getListWay();
    },
    //跳转用户信息
    jump_information(id) {

    },
    // 打开修改备注的弹框
    editNotesWay(row) {
      // this.remarkDialog = true;
      this.remarkLoading = true;
      // this.remarkForm.detail_id = row.detail_id;
      getRemarkList({
        detail_id: this.goodsid
      }).then((res) => {
        this.remarkLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.remarkDialog = false;
          return this.$messages.error(res.msg);
        }
        this.remarkList = res.data;
      });
    },
    setRemarkSubmit() {
      if (!this.remarkForm.remark) {
        return this.$messages.error("请输入需要添加的备注");
      }
      this.setRemarkLoading = true;
      setRemark(this.remarkForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.setRemarkLoading = false;
          return this.$messages.error(res.msg);
        }
        this.$messages.success(res.msg);
        this.remarkForm.remark = "";
        this.editNotesWay(this.remarkForm);
        this.setRemarkDialog = false;
      });
    },
    drawerHandle(row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.addressDialog = true;
      this.addressLoading = true;
      getRegionList()
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.addressLoading = false;
            return this.$messages.error(res.msg);
          }
          this.provinceList = res.data;
          var arr = this.provinceList.filter((item) => {
            if (item.name == obj.addr_province_name) {
              return item.children;
            }
          });
          this.cityList = arr[0].children;
          var arr1 = this.cityList.filter((item) => {
            if (item.name == obj.addr_city_name) {
              return item.children;
            }
          });
          this.districtList = arr1[0].children;
          this.addressForm.detail_id = obj.detail_id;
          this.addressForm.recipient = obj.addr_recipient;
          this.addressForm.phone_number = obj.addr_phone_number;
          this.addressForm.province_name = obj.addr_province_name;
          this.addressForm.city_name = obj.addr_city_name;
          this.addressForm.district_name = obj.addr_district_name;
          this.addressForm.address_details = obj.addr_address_details;
          this.addressLoading = false;
        })
        .catch((res) => {
          this.addressLoading = false;
          return this.$messages.error(res.msg);
        });
    },
    provinceWay(val) {
      this.addressForm.city_name = "";
      this.addressForm.district_name = "";
      this.provinceList.forEach((item) => {
        if (item.name == val) {
          this.cityList = item.children;
        }
      });
    },
    cityWay(val) {
      this.addressForm.district_name = "";
      this.cityList.forEach((item) => {
        if (item.name == val) {
          this.districtList = item.children;
        }
      });
    },
    // 提交修改收货地址
    addressSubmit() {
      this.$refs.addressForm.validate((valid) => {
        if (valid) {
          this.addressLoading = true;
          setAddress(this.addressForm)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.addressLoading = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.addressLoading = false;
              this.addressDialog = false;
              this.getListWay();
              this.addressForm = {
                detail_id: "", //订单明细表ID
                recipient: "", //收货人姓名
                phone_number: "", //收货人电话
                province_name: "", //省
                city_name: "", //市
                district_name: "", //区
                address_details: "", //	详细地址
              };
            })
            .catch((res) => {
              this.addressLoading = false;
              return this.$messages.error(res.msg);
            });
        } else {
          return false;
        }
      });
    },
    cancellationOrder(row) {
      this.cancelform.detail_id = row.detail_id;
      this.cancelDialog = true;
    },
    serCancelSubmit() {
      this.cancelLoading = true;
      serCancel(this.cancelform).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.cancelLoading = false;
          return this.$messages.error(res.msg);
        }
        this.$messages.success(res.msg);
        this.cancelDialog = false;
        this.cancelform = {
          detail_id: "",
          reason: "",
        };
        this.getListWay();
      });
    },
    // 退款
    refundOrder(row) {
      this.refundDialog = true;
      this.refundLoading = true
      getGoodsByOrder({id:this.goodsid})
        .then((res) => {
          let myArray = res.data;
          this.refundLoading = false
          this.refundformList = myArray.map(item => {
            return { ...item, reason: '' };
          });
        })
        .catch((err) => {
          this.$messages.error(err.msg);
        });

      // this.refundform.detail_id = row.id;
      // this.refundform.price_total = row.pay_total;
      // this.refundform.points_total = row.points_total;
      // this.refundform.coupon_total = row.coupon_total;

    },
    refundSubmit() {
      // let refundList = {
      //   refund:this.refundformList
      // }
      // console.log(this.refundformList,"999")
      // return
      // this.$refs.refundform.validate((valid) => {
      //   if (valid) {
          this.refundLoading = true;
          setRefundDirectBatch({refund:this.refundformList}).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.refundLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.refundDialog = false;
            this.refundformList = [];
            this.getListWay();
          });
        // } else {
        //   return false;
        // }
      // });
    },
    recordsWay(row) {
      this.recordsDialog = true;
      this.recordsLoading = true;
      getDeliveryList({
        detail_id: row.detail_id
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.recordsLoading = false;
          return this.$messages.error(res.msg);
        }
        this.recordsList = res.data;
        this.recordsLoading = false;
      });
    },
    // 订单详情
    detailsHandle(row) {
      this.detailsDialog = true;
      this.detailsLoading = true;
      this.goodsid = row.id
      getInfoByOrder({
        id: row.id
      }).then((res) => {
        this.detailsObj = res.data.order
        this.detailsuser = res.data.user
        this.detailsLoading = false
      });

    },
    pathWay() {
      this.$router.push("/order/platformorder/aftersales");
    },
  },
  };
</script>

<style lang="scss">
  .my-label {
    width: 30%;
    text-align: center !important;
    font-size: 14px;
    font-weight: 550;
  }

  .description {
    font-size: 14px;
    font-weight: 550;
  }

  .order_box {
    width: 100%;
    margin: 0 auto;
    background-color: #efefef;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    font-size: 14px;
    border-radius: 6px;
    color: #636569;

    div {
      margin-right: 36px;
    }

    span {
      font-weight: 550;
    }
  }

  .useribfx {
    display: flex;
    align-items: center;

    .user_ibx {
      width: 70%;
      margin-left: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user_infox {
        color: #636569;
        font-size: 14px;
        line-height: 40px;
        font-weight: 550;
      }
    }
  }
  .informationTitleView .right span{
    color: #fff;
  }
</style>
